<template>
	<view class="classlist">

		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="(item,index) in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>

		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>

		<view class=".safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		apiGetClassList,
		apiGetHistoryList
	} from "@/api/apis.js"

	import {
		onLoad,
		onUnload,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"

	import {
		gotoHome
	} from "@/utils/common.js"

	const moreState = ref('loading')

	// 分享页面title名称
	let pageName

	// 渲染列表
	const classList = ref([])
	const noData = ref(false)
	// 定义data参数
	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	// console.log(queryParams);




	onLoad((e) => {
		// console.log(e)
		let {
			id = null, name = null, type = null
		} = e;
		
		// 区分个人中心页类型
		if(type) queryParams.type = type;
		if(id) queryParams.classid = id;
		
		// console.log(queryParams)
		pageName = name

		if (!queryParams.classid && !queryParams.type) {
			gotoHome()
			return;
		}


		// 修改导航标题
		uni.setNavigationBarTitle({
			title: name
		})
		// 执行获取分类列表的方法
		getClassList()
	})

	onReachBottom((e) => {
		if (noData.value) return;
		// console.log(e)
		queryParams.pageNum++
		getClassList()
	})

	// 请求分类列表
	const getClassList = async () => {
		let res;
		if(queryParams.classid){
			// console.log(12)
			res = await apiGetClassList(queryParams);
		}
		if(queryParams.type){
			// console.log(21)
			res = await apiGetHistoryList(queryParams);
		}
		// console.log(queryParams)
		// console.log(res)
		// return;
		// 图片列表，数据放入classlist
		classList.value = [...classList.value, ...res.data];
		if (queryParams.pageSize > res.data.length) {
			noData.value = true;
		}
		// 拿到的数据，放入缓存
		uni.setStorageSync("storgClassList", classList.value)
		// console.log(noData.value)
	}


	// 分享好友
	onShareAppMessage((e) => {
		console.log(e)
		return {
			title: '虾米壁纸分类' + pageName,
			path: '/pages/classify/classify?id=' + queryParams.value + "&name=" + pageName
		}
	})

	// 分享朋友圈
	onShareTimeline(() => {
		return {
			title: '虾米壁纸分类' + pageName,
			query: 'id=' + queryParams.classid + '&name=' + pageName

		}
	})

	// 分类列表离开页面,清理缓存
	onUnload(() => {
		uni.removeStorageSync("storgClassList")
	})
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 8rpx;
			padding: 8rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>